<template>
  <basic-dialog
    :visible="visible"
    :title="'合同信息'"
    :ok-text="'确认'"
    :show-close="false"
    :handle-ok="handleSave"
    :handle-close="onCancel"
    :loadingBtn="submitLoading"
  >
    <div class="form-container">
      <el-form
        ref="supplierForm"
        :model="supplierForm"
        label-width="130px"
      >
        <el-card
          v-for="(item, index) in supplierFormList"
          :key="index"
          class="supplier-info"
          shadow="hover"
        >
          <div slot="header">
            <span class="title">中标供应商: {{item.supplierName}}</span>
          </div>
          <el-form-item label="是否签订合同：">
            <el-radio-group v-model="item.signContract">
              <el-radio :label='1'>签订合同</el-radio>
              <el-radio :label='0'>不签订合同</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="不签订合同原因：">
            <el-input v-model.trim="item.noSignContractReason" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="上传合同附件:">
            <el-upload
              class="upload-demo"
              action="/srm-api/orderInquiry/uploadContract"
              accept=".doc, .docx, .xls, .xlsx, .pdf, .jpg, .jpge, .png"
              :on-remove="handleRemove.bind(null, {'index': index, 'data': item})"
              :before-upload="beforeFileUpload"
              :on-success="onUploadsuccess.bind(null, {'index': index, 'data': item})"
              :on-error="onUploadError.bind(null, {'index': index, 'data': item})"
              :fileList="supplierFormList[index].fileList"
            >
              <el-button
                type="primary"
                size="small"
              >上传附件</el-button>
            </el-upload>
          </el-form-item>
        </el-card>
      </el-form>
    </div>
  </basic-dialog>
</template>
<script>
import { mapState } from 'vuex';
import { isResponseSuccess } from '@sourcing/utils'
import BasicDialog from '@sourcing/components/BasicDialog';

export default {
  name: 'SupplierDialog',
  components: {
    BasicDialog,
  },
  props: {
    dialogVisible: {
      type: Boolean,
    },
    submitLoading: {
      type: Boolean,
    },
  },
  data () {
    return {
      supplierForm: {
        supplierFormList: [],
      },
    };
  },

  computed: {
    ...mapState('sourcing', {
      supplierFormList: (state) => state.purchaseDetail.calibrationSupplierList,
    }),
    visible () {
      return this.dialogVisible;
    },
  },
  methods: {
    onCancel () {
      this.$emit('hide-handler');
    },
    handleSave () {
      let hasEmptyReasonList = this.supplierFormList.filter((item) => (item.signContract == 0 && !item.noSignContractReason))
      let hasEmptyFile = this.supplierFormList.filter((item) => (item.signContract == 1 && !item.contractName))
      if (hasEmptyReasonList.length !== 0) {
        return this.$message.warning('不签合同原因不能为空')
      }
      if (hasEmptyFile.length !== 0) {
        return this.$message.warning('请上传签订合同附件')
      }
      this.$emit('confirm-submit', this.supplierFormList)
    },
    // 附件上传成功
    onUploadsuccess (obj, res) {
      const { index } = obj;
      this.supplierFormList[index].fileList = [];
      if (isResponseSuccess(res)) {
        const { contractName, newContractName, filePath, fileSize } = res.data;
        const file = { name: contractName };
        this.supplierFormList[index].fileList = [file];
        this.supplierFormList[index].contractName = contractName;
        this.supplierFormList[index].newContractName = newContractName;
        this.supplierFormList[index].filePath = filePath;
        this.supplierFormList[index].fileSize = fileSize;
      } else {
        this.$message.error(res.msg || '操作失败');
      }
    },
    // 附件上传校验
    beforeFileUpload (file) {
      const fileExt = file.name.replace(/.+\./, '');
      const fileTypeArr = [ 'doc', 'docx', 'xls', 'xlsx', 'pdf', 'jpg', 'jpge', 'png' ];
      const isRightType = fileTypeArr.includes(fileExt.toLowerCase());
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isRightType) {
        this.$message.error('请上传（doc、docx、xls、xlsx、pdf、jpg、jpge、png）格式的文件!');
      }
      if (!isLt10M) {
        this.$message.error(`上传文件大小不能超过 10MB!`);
      }
      return isRightType && isLt10M;
    },
    onUploadError (obj, res) {
      this.$message.error(res.msg || '上传异常');
    },
    // 删除文件
    handleRemove (obj, file) {
      const { index } = obj;
      this.supplierFormList[index].fileList = [];
      this.supplierFormList[index].contractName = '';
      this.supplierFormList[index].newContractName = '';
      this.supplierFormList[index].filePath = '';
      this.supplierFormList[index].fileSize = '';
      console.log(this.supplierFormList)
    }
  },
};
</script>
<style lang="less" scoped>
.form-container {
  .supplier-info {
    margin-bottom: 10px;
  }
  /* /deep/.el-upload-list__item .el-icon-close {
    display: none;
  } */
}
</style>
